<html>
<head>
    <meta charset="utf-8">
    <title>商品列表-库存式生产-上门服务 </title>
</head>
<body>
<div id="app">
    <el-table :data="goodsList"
              style="width: 100%">
        <el-table-column
                prop="id"
                label="ID"
                width="180">
        </el-table-column>
        <el-table-column
                prop="goodsName"
                label="名称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="auditStatus"
                label="审核状态">
            <template slot-scope="scope">
                <span v-if="scope.row.auditStatus==='0'">未审核</span>
                <span v-else-if="scope.row.auditStatus==='1'">提交审核</span>
                <span v-else-if="scope.row.auditStatus==='2'">审核通过</span>
                <span v-else-if="scope.row.auditStatus==='3'">审核不通过</span>
            </template>
        </el-table-column>
        <el-table-column
                prop="brandId"
                label="品牌名称">
            <template slot-scope="scope">
                {{brandMap[scope.row.brandId]}}
            </template>
        </el-table-column>
        <el-table-column
                prop="price"
                label="价格"
                :formatter=formatterPrice>
        </el-table-column>
        <el-table-column
                prop="category1Id"
                label="分类">
            <template slot-scope="scope">
                {{categoryMap[scope.row.category1Id] + '>>' + categoryMap[scope.row.category2Id] + ">>" + categoryMap[scope.row.category3Id]   }}
            </template>
        </el-table-column>
        <el-table-column
                prop="caption"
                label="标题">
        </el-table-column>
        <el-table-column
                prop="mainPic"
                label="图片">
            <template slot-scope="scope">
                <el-image
                        style="width: 100px; height: 100px"
                        :src="scope.row.mainPic">
                </el-image>
            </template>
        </el-table-column>
        <el-table-column
                prop="updateTime"
                label="最后修改时间"
                :formatter="formatterDate">
        </el-table-column>
        <el-table-column
                prop="isMarketable"
                label="是否上架">
            <template slot-scope="scope">
                {{scope.row.isMarketable}}
                <span v-if="scope.row.isMarketable =='0'">未上架</span>
                <span v-if="scope.row.isMarketable =='1'">已上架</span>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
<script type="application/javascript" src="js/vue/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    vm =new Vue({
        el:"#app",
        data(){
            return{
                searchMap:{},
                pageNo:1,
                pageSize:5,
                total:${total?c},
                goodsList:[
                    <#list goodsList as goods>
                    {
                        "id": "${goods.id?c}",
                        "goodsName": "${goods.goodsName!''}",
                        "auditStatus": "${goods.auditStatus!'0'}",
                        "isMarketable": "${goods.isMarketable!'0'}",
                        "brandId": "${goods.brandId!'0'}",
                        "caption": "${goods.caption!''}",
                        "mainPic": "${goods.mainPic!''}",
                        "price":
                            <#if goods.price??>
                            ${goods.price?c}
                            <#else>
                            "-"
                        </#if>,
                        "createTime": ${goods.createTime?string('"yyyy年MM月dd日 HH:mm:ss"')},
                        "updateTime": ${goods.updateTime?string('"yyyy年MM月dd日 HH:mm:ss"')},
                        "category1Id": "${goods.category1Id!'-'}",
                        "category2Id": "${goods.category2Id!'-'}",
                        "category3Id": "${goods.category3Id!'-'}",
                        "typeTemplateId": "${goods.typeTemplateId!'-'}"
                    },
                    </#list>
                ],
                brandMap:{
                    <#list brandMap?keys as key>
                    "${key}":"${brandMap['${key}']}",
                    </#list>
                },
                categoryList:[],
                categoryMap:{}
            }
        },
        methods:{
            formatterPrice(row, column, cellValue, index){
                return row.price.toFixed(2);
            },
            formatterDate(row, column, cellValue, index){
                let date = new Date(cellValue);
                let hour = date.getHours();
                let minute = date.getMinutes();
                let seconds = date.getSeconds();
                return date.getFullYear() + '年' + (date.getMonth()+1) +'月' + date.getDate() + '日'
                    + (hour>=10?hour:'0'+hour)+ ':' +(minute>=10?minute:'0'+minute) +':' + (seconds>=10?seconds:'0'+seconds);
            },
            findAllCategory(){
                axios.get(`http://localhost:18080/category/findAll`).then(res=>{
                    console.log(res.data);
                this.categoryList = res.data;
                this.categoryList.forEach(element=>{
                    this.categoryMap[element.id]=element.name;
            })
            })
            },
            findPage(){
                axios.post('http://localhost:18080/goods/findPage/'+ this.pageNo +'/'+this.pageSize,this.searchMap)
                    .then(res=>{
                    console.log(res.data.records);
                this.goodsList = res.data.records;
                this.total = Number.parseInt(res.data.total);
            })
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.findPage();
            },
            handleCurrentChange(val) {
                this.pageNo = val;
                this.findPage();
            }
        },
        async mounted(){
            await this.findAllCategory();
            this.findPage();//异步
        }
    })
</script>
</body>
</html>
